<template>
  <div class="login-container">
    <div class="login-head"></div>
    <!--
      配置Form表单验证：
      1、必须给el-from组件绑定model为表单数据对象
      2、给需要验证的表单项el-form-item绑定prop属性
        注意:prop属性需要指定表单对象中的数据名称
      3、通过el-from 组件的 rules属性配置验证规则

      手动触发表单验证:
      1、给el-form设置 ref 起个名字（随便起名，不要重复即可)
      2、通过 ref 获 el-form组件，调用组件的validate进行验证

     -->
    <el-form :model="user" ref="login-form" class="login-form" :rules="formRules">
      <el-form-item prop="mobile">
        <el-input v-model="user.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="user.code" placeholder="请输入验证码" ></el-input>
      </el-form-item>
      <el-form-item prop="agree">
        <el-checkbox v-model="user.agree">
          我已阅读并同意用户协议和隐私条款
        </el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onLogin" class="login-btn"
          :loading="loginLoading" >登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import { login } from '@/api/user'

export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data () {
    return {
      user: {
        mobile: '13911111111', // 手机号
        code: '246810', // 验证码
        agree: false // 是否同意协议
      },
      // checked: false, // 是否同意协议的选中状态
      loginLoading: false, // 登录的loading状态
      formRules: { // 表单验证规则配置
      // 要验证的数据名称：规则列表[]
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'change' },
          { pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, message: '请输入正确格式的手机号' }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'change' },
          { pattern: /^\d{6}$/, message: '请输入正确的验证码' }
        ],
        agree: [
          { // 自定义校验规则
            validator: (rule, value, callback) => {
              if (value) {
                callback()
              } else {
                callback(new Error('请同意用户协议'))
              }
            },
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    login () {
      this.loginLoading = true
      login(this.user).then(res => {
        // 登录成功
        this.$message({
          message: '登录成功',
          type: 'success'
        })
        this.loginLoading = false

        // 将接口返回的用户相关数据放到本地存储，方便应用数据共享
        // 本地存储只能存储字符串
        // 如果需要存储对象、数组类型的数据，则把他们转为JSON格式字符串进行存储
        window.localStorage.setItem('user', JSON.stringify(res.data.data))

        // 跳转到首页
        this.$router.push({
          name: 'home'
        })
      }).catch(err => {
        console.log('登录失败', err)
        // 登录失败
        this.$message.error('登录失败，手机号或验证码错误')
        this.loginLoading = false
      })
    },
    onLogin () {
      // 获取表单数据(根据接口要求绑定数据)
      // 表单验证
      // validate 方法是异步的
      this.$refs['login-form'].validate(valid => {
        // 如果表单验证失败，停止请求提交
        if (!valid) {
          return
        }
        // 验证通过,提交登录
        this.login()
      })

      // 处理后端响应结果
      //    成功:XXx
      //    失败:XXX

      console.log('submit')
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center; // 水平居中
  align-items: center; // 垂直居中
  background: url("./13.jpeg") no-repeat;
  background-size: cover;
  .login-form {
    background-color: white;
    padding: 50px;
    min-width: 300px;
  }
  .login-btn {
    width: 100%;
  }
  .login-head {
    height: 2;
    background: url('./login-index.jpg') no-repeat;
  }
}
</style>
